<template>
    <div class="Playlist-out">
         <shortcuts></shortcuts>
         <h3>官方榜</h3>
         <div>
            <div class="theCharts" @click="ToMusicDetails(item.id)" v-for="(item,i) in Toplist" :key="i">
            <img :src="item.coverImgUrl" alt="">
            <div class="theCharts-item" >
            <li  v-for="(item2,k) in item.tracks" :key="k"> <span>{{k+1}}</span> {{item2.first}}</li>
            <p>查看全部 <i class="el-icon-arrow-right"></i></p>
           </div>
        </div>
         </div>
           <h3>全球榜</h3>
     <div class="Globallist">
          <div class="Globallist-item" @click="ToMusicDetails(item.id)" v-for="(item,i) in artistToplist" :key="i">
              <img :src="item.coverImgUrl" alt="">
               <p>{{item.name}}</p>
          </div>
     </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        artistToplist:[],
        Toplist:[]
      }
    },
    methods: {
    async getToplist(){
       const {data:res} =await this.$request("/toplist/detail")
       console.log(res)
       if(res.code!==200) return 
       this.Toplist=res.list.slice(0,4)
        this.artistToplist=res.list.slice(4)
      },
      ToMusicDetails(id){
            this.$router.push({path:'/MusicDetails',query:{id}})
      }
    },
    mounted(){
      this.getToplist()
    }
  }
</script>

<style lang="less" scoped>
.Playlist-out{
 width: 1300px;
  display: flex;
  flex-direction:column;
  margin:40px 40px;
  padding-bottom:40px;
  h3{
    color:black;
  }
  .theCharts{
    margin-top:30px;
    height:200px;
    width:100%;
    display:flex;
    position:relative;
    img{
       height:140px;
       width:140px;
       border-radius:10px;
    }
   .theCharts-item{
      height:200px;
      width:100%;
      
      li{
         width:100%;
         height:34px;
         display:flex;
         align-items:center;
         span{
           padding:0 6px;
         }
          &:hover{
         background-color:#aaa;
       }
      }
      li:nth-child(2n-1){
        background-color:#F9F9F9;
      }
     
   }
   p{
     margin:20px 0 0 5px;
     font-size:13px;
     i{
        font-size:10px;
     }
   }
  }
  .Globallist{
    margin-top:20px;
    display:flex;
    flex-wrap:wrap;
     .Globallist-item{
       margin:0 0 0 20px;
       width:16%;
       height:170px;
       margin-bottom:20px;
       img{
         width:100%;
         height:150px;
         border-radius:10px;
       }
       p{
         font-size:13px;
         padding-left:5px;
       }
     }
  }
}
    
</style>